<script setup>
import { ref, computed } from 'vue';

let message = ref('')
let flag = ref(false)
let resolvePromise = ref(null);

const showprompt = (msg) => {
  message.value = msg
  flag.value = true;
  return new Promise((resolve) => {
    resolvePromise.value = resolve;
  });
}
const handleYes = () => {
  flag.value = false;
  resolvePromise.value(true); // 用户点击“是”，返回 true
};

const handleNo = () => {
  flag.value = false;
  resolvePromise.value(false); // 用户点击“否”，返回 false
};

// 暴露 showprompt 方法给其他组件
defineExpose({ showprompt });

</script>
<template>
  <div class="mask" v-if="flag"></div>
  <div class="prompt" v-if="flag">
    <div class="pro-title">
      <p>提示</p>
    </div>
    <div class="pro-body">
      <div class="pro-text">{{ message }}</div>

    </div>
    <div class="pro-foot">
      <button class="no" @click="handleNo">否</button>
      <button class="yes" @click="handleYes">是</button>
    </div>
  </div>

</template>
<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 998; /* 低于提示框 */
}
.prompt {
  width: 300px;
  height: 150px;
  background-color: #fff;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.pro-title {
  color: #ffffff;
  height: 30px;
  background-color: #2196F3;
  border-radius: 10px 10px 0 0;
  line-height: 30px;
  text-align: center;
}

.pro-body {
  flex-grow: 1;
  padding: 15px;
}

.pro-foot {
  /* background-color: #44c76b; */
  padding-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

.pro-foot button {
  width: 50px;
  height: 30px;
  border-radius: 30px;
  border: none;
  color: #ffffff;
}

.no {
  background-color: #F44336;

}

.yes {
  background-color: #4CAF50;
}
</style>